import React from 'react';
import { Chart, Geom, Axis, Tooltip, Coord, Legend } from 'bizcharts';
import DataSet from '@antv/data-set';

export default class Pie extends React.Component {
  render() {
    const { DataView } = DataSet;
    const data = [
      { item: '事例一', count: 40, percent: 0.4 },
      { item: '事例二', count: 21, percent: 0.21 },
      { item: '事例三', count: 17, percent: 0.17 },
      { item: '事例四', count: 13, percent: 0.13 },
      { item: '事例五', count: 9, percent: 0.09 },
    ];

    const dv = new DataView();
    dv.source(this.props.data).transform({
      type: 'percent',
      field: 'dbLeTypeCount',
      dimension: 'dbLeTypeName',
      as: 'percent',
    });
    const cols = {
      percent: {
        formatter: val => (val = `${(val * 100).toFixed(2)}%`),
      },
    };

    return (
      <div>
        <Chart
          height={300}
          data={dv}
          scale={cols}
          padding={['auto', 100, 'auto', 'auto']}
          forceFit
          placeholder
        >
          <Coord type="theta" radius={0.65} />
          <Axis name="percent" />
          <Legend position="right-center" />
          <Tooltip
            showTitle={false}
            itemTpl='<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}：{value}，{dbLeTypeCount}个</li>'
          />
          <Geom
            type="intervalStack"
            position="percent"
            color="dbLeTypeName"
            tooltip={[
              'dbLeTypeName*percent*dbLeTypeCount',
              (dbLeTypeName, percent, dbLeTypeCount) => {
                percent = `${percent.toFixed(2) * 100}%`;
                return {
                  name: dbLeTypeName,
                  value: percent,
                  dbLeTypeCount: dbLeTypeCount,
                };
              },
            ]}
            style={{
              lineWidth: 1,
              stroke: '#fff',
            }}
          />
        </Chart>
      </div>
    );
  }
}
